<template>
  <div>
    <hr>
    <p>-----这是一个父组件nexttick-------------{{ num }}---</p>
    <p ref="pRef">{{ num }}</p>
    <son ref="sonRef" :num="num" />
    <button @click="hClick">加1</button>
  </div>
</template>
<script>

import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      num: 100
    }
  },
  methods: {
    hClick() {
      this.num = this.num + 1
      console.log('this.num', this.num) // 101
      // dom的更新是异步的
      console.log('this.$refs.pRef.innerHTML', this.$refs.pRef.innerHTML) // 100
      console.log('this.$refs.sonRef.num', this.$refs.sonRef.num) // 100
      // this.$nextTick : 会等待dom更新的异步任务完成之后，再执行里面的回调函数
      // this.$nextTick(() => {
      //   console.log('this.$refs.pRef.innerHTML', this.$refs.pRef.innerHTML) // 101
      //   console.log('this.$refs.sonRef.num', this.$refs.sonRef.num) // 101
      // })
      // 微任务 (promise  axios实例）-----》  dom更新渲染  -----》   宏任务 setTimeOut setInterval  事件
      setTimeout(() => {
        console.log('this.$refs.pRef.innerHTML', this.$refs.pRef.innerHTML) // 101
        console.log('this.$refs.sonRef.num', this.$refs.sonRef.num) // 101
      }, 0)
    }
  }
}
</script>

<style>

</style>
